<template>
  <div class="cinema-seat">
    <div class="page-header canary-theme">
      <div class="page-header-left">
        <div @click="backgo" class="page-header-back"></div>
      </div>
      <div class="page-header-title line-ellipsis" v-if="cinemaInfo">
        {{ cinemaInfo.nm }}
      </div>
      <div class="page-header-right page-header-button">
        <div class="nav-btn">
          <img src="../assets/images/nav-button.png" alt="" class="nav-icon" />
        </div>
      </div>
    </div>
    <!-- 座位 -->
    <div class="content" v-if="!isSeats">
      <div class="outer">
        <div class="top" v-if="currentPlay">{{ currentPlay.th }}</div>
        <div class="seatRegion" v-if="seatlist">
          <div
            class="seatRow"
            v-for="(item, index) in seatlist"
            :key="index"
            ref="img"
          >
            <img
              v-for="(s, i) in item.seats"
              :key="i"
              :src="s.seatStatus == 0 ? imageUrl : allowUrl"
              alt=""
              class="my-seat"
              @click="selectSeat(s.rowId, s.columnId, i, s.seatNo)"
            />
          </div>
        </div>
        <div class="graphContainer" v-if="seatTips">
          <div class="graphItem" v-for="(item, index) in seatTips" :key="index">
            <div
              class="graphLoverIcon"
              :style="{ 'background-image': 'url(' + item.legendIcon + ')' }"
            ></div>
            <span>{{ item.legendName }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="seats-info" v-if="!isSeats">
      <div class="movie-info" v-if="currentfilm">
        <div class="movie-name">{{ currentfilm.nm }}</div>
      </div>
      <div class="show-info" v-if="currentPlay">
        <!-- <span>今天</span> -->
        <span>{{ navTime(currentTime) }}</span>
        <span>{{ currentPlay.tm }}-{{ endTime(currentPlay.tm) }}</span>
        <span>{{ currentPlay.lang }} {{ currentPlay.tp }}</span>
      </div>
      <div class="selectedSeat" v-if="Selectedlist.length != 0">
        <div class="border1px"></div>
        <ul class="selectedList">
          <li
            class="selectedItem"
            v-for="(item, index) in Selectedlist"
            :key="index"
            @click="del(index)"
          >
            <div class="seatDesc">{{ item.row }}排{{ item.col }}座</div>
            <div>
              <span>¥{{ item.price }}</span>
            </div>
            <div class="cancelBtn"></div>
          </li>
        </ul>
      </div>
    </div>
    <div class="submitBlock" v-if="!isSeats">
      <div class="submitBtn">
        <div
          class="submitDesc"
          v-if="Selectedlist.length != 0"
          @click="showPayV"
        >
          ¥{{ sum }} 确认选座
        </div>
        <div class="disableText" v-if="Selectedlist.length == 0">请先选座</div>
      </div>
    </div>
    <pay-view
      v-if="showPay"
       @back="back"
      :cinema-info="cinemaInfo"
      :currentfilm="currentfilm"
      :playlist="playlist"
      :selectedlist="Selectedlist"
      :current-play="currentPlay"
    ></pay-view>
    <div class="load" v-if="isSeats">
      <van-loading type="spinner" size="18px" color="#fff"
        >正在加载座位...</van-loading
      >
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  getCinemasDetail,
  getCinemaShows,
  getCinemaSeat,
} from "../api/cinema.js";
import PayView from "../components/PayView.vue";
import { useRoute,useRouter } from "vue-router";
import { computed, ref, nextTick, onMounted } from "vue";
export default {
  components: {
    PayView,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    let cinemaInfo = ref(null);
    let movieslist = ref(null);
    let currentfilm = ref(null);
    let seatlist = ref(null); //座位
    let allowUrl = ref(null); //可选座位
    let imageUrl = ref(null); //不可选座位
    let selecedUrl = ref(null); //选择座位
    let seatTips = ref(null); //选座提示
    let Selectedlist = ref([]); //已选取
    let flag = ref(false);
    let seatIndex = ref(null);
    let rowIndex = ref(null);
    let date = ref(null); //当前时间
    let currentTime = ref(null);
    let playlist = ref(null); //当前选座电影列表
    let currentPlay = ref(null); //当前播放
    let seqNo = ref(null); //场次号
    let showPay = ref(false); //支付页面
    let isSeats = ref(true);
    let row = ref(null);
    let col = ref(null);
    let img = ref(null);

    let backgo = () => {
      router.go(-1);
    };
    //影院详情数据
    let getCinemaDetailFun = (id) => {
      getCinemasDetail({ cinemaId: id }).then((data) => {
        cinemaInfo.value = data.data;
      });
    };
    //获取影院正在上映电影
    let getCinemaShowsFun = (id, ci) => {
      getCinemaShows({ cinemaId: id, ci, channelId: 4 }).then((data) => {
        // console.log(data);
        movieslist.value = data.data.movies;
        let index = movieslist.value.findIndex(
          (item) => item.id == route.query.movieId
        );
        currentfilm.value = movieslist.value[index];
        let playIndex = currentfilm.value.shows.findIndex(
          (item) => item.showDate == route.query.time
        );
        playlist.value = currentfilm.value.shows[playIndex]; //获取当前选座电影列表
        let currenPlayIndex = playlist.value.plist.findIndex(
          (item) => item.seqNo == seqNo.value
        );
        currentPlay.value = playlist.value.plist[currenPlayIndex]; //根据场次号获取当前播放电影
        // console.log(this.currentfilm);
        // console.log(this.playlist);
        // console.log(this.currentPlay);
      });
    };
    //获取座位
    let getSeatFun = () => {
      getCinemaSeat().then((data) => {
        // console.log(data);
        if (data) {
          setTimeout(() => {
            isSeats.value = false;
          }, 2000);
        }
        seatlist.value = data.data.seat.regions[0].rows;
        imageUrl.value = data.data.seat.image.forbidImages[0];
        selecedUrl.value = data.data.seat.image.selectedImages[0];
        allowUrl.value = data.data.seat.image.seatLegends[0].legendIcon;
        seatTips.value = data.data.seat.image.seatLegends;
        // console.log(this.seatlist);
        // console.log(this.seatTips[1]);
      });
    };
    //选座
    let selectSeat = (row, col, index, no) => {
      // console.log(this.$refs.img[row-1].children[index].src);
      let allowImg = img.value[row - 1].children[index].src == allowUrl.value;
      let selectedImg =
        img.value[row - 1].children[index].src == selecedUrl.value;
      let isselectImg =
        img.value[row - 1].children[index].src == seatTips.value[1].legendIcon;

      if (no != "") {
        if (allowImg) {
          if (Selectedlist.value.length < 4) {
            img.value[row - 1].children[index].src = selecedUrl.value;
            Selectedlist.value.push({
              id: index,
              row: row,
              col: col,
              price: Number(Math.ceil(currentPlay.value.baseSellPrice)),
            });
          } else {
            Toast("一次最多购买4张票");
          }
        } else if (selectedImg) {
          if (Selectedlist.value.length != 0) {
            let num = Selectedlist.value.findIndex(item=> item.id == index);
            Selectedlist.value.splice(num, 1);
          }
          img.value[row - 1].children[index].src = allowUrl.value;
        } else if (isselectImg) {
          Toast("此座位已被选");
        }
      } else {
        Toast("此座位不可售");
      }
    };
    //取消座位
    let del = (index) => {
      img.value[Selectedlist.value[index].row - 1].children[
        Selectedlist.value[index].id
      ].src = allowUrl.value;
      Selectedlist.value.splice(index, 1);
    };
    //显示支付页面
    let showPayV = () => {
      showPay.value = true;
    };
    //关闭支付页面
    let back = (value) => {
      showPay.value = value;
    };
    let navTime = (value) => {
      let dates = value;
      let datesar = dates.split("-");
      let date = new Date();
      let datewl = new Date(datesar[0], String(datesar[1] - 1), datesar[2]);
      let datewls = datewl.getDay();

      let datesl = date.getDate();
      if (datesar[2] == datesl) {
        return "今天 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datesar[2] == Number(datesl) + 1) {
        return "明天 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datesar[2] == Number(datesl) + 2) {
        return "后天 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 1) {
        return "星期一 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 2) {
        return "星期二 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 3) {
        return "星期三 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 4) {
        return "星期四 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 5) {
        return "星期五 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 6) {
        return "星期六 " + datesar[1] + "月" + datesar[2] + "日";
      } else if (datewls == 0) {
        return "星期日 " + datesar[1] + "月" + datesar[2] + "日";
      }
    };
    let endTime = (value) => {
      if (value) {
        let starttime = value.split(":");
        let endTime = `${Number(starttime[0]) + 2}:${starttime[1]}`;
        if (Number(starttime[0]) + 2 == 24) {
          let endTime = `${Number(0) + "0"}:${starttime[1]}`;
          return endTime;
        }
        if (Number(starttime[0]) + 2 > 24) {
          let endTime = `${"0" + (Number(starttime[0]) + 2) - 24}:${
            starttime[1]
          }`;
          return endTime;
        }
        return endTime;
      }
    };
    let sum = computed(() => {
      return Selectedlist.value.reduce((total, item) => {
        return (total += item.price);
      }, 0);
    });
    onMounted(() => {
      nextTick(() => {
        let temp = JSON.parse(window.localStorage.getItem("orderlist"));
        setTimeout(() => {
          if (temp) {
            temp.forEach((item) => {
              if (!item.isfinish) {
                item.seat.forEach((k) => {
                  if (img.value) {
                    img.value[Number(k.row) - 1].children[k.id].src =
                      seatTips.value[1].legendIcon;
                  }
                });
              } else {
                item.seat.forEach((k) => {
                  if (img.value) {
                    img.value[Number(k.row) - 1].children[k.id].src =
                      allowUrl.value;
                  }
                });
              }
            });
          }
        }, 2500);
      });
    });
    let cinemaId = route.query.cinemaId;
    let cityId = route.query.ci;
    seqNo.value = route.query.seqNo;
    currentTime.value = route.query.time;

    getCinemaDetailFun(cinemaId);
    getCinemaShowsFun(cinemaId, cityId);
    getSeatFun();
    return {
      backgo,
      selectSeat,
      del,
      showPayV,
      back,
      sum,
      endTime,
      navTime,
      cinemaInfo,
      movieslist,
      currentfilm,
      seatlist, //座位
      allowUrl, //可选座位
      imageUrl, //不可选座位
      selecedUrl, //选择座位
      seatTips, //选座提示
      Selectedlist, //已选取
      flag,
      seatIndex,
      rowIndex,
      date, //当前时间
      currentTime,
      playlist, //当前选座电影列表
      currentPlay, //当前播放
      seqNo, //场次号
      showPay, //支付页面
      isSeats,
      row,
      col,
      img,
    };
  },
};
</script>

<style lang="less" scoped>
.cinema-seat {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .page-header {
    display: flex;
    height: 50px;
    text-align: center;
    color: #fff;
    background: #e54848;

    .page-header-left {
      width: 50px;
      height: 100%;
      line-height: 50px;

      .page-header-back {
        display: inline-flex;
        position: relative;
        width: 16px;
        height: 16px;
        vertical-align: middle;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-bottom: 2px solid #fff;
          border-left: 2px solid #fff;
          transform: rotate(45deg);
        }
      }
    }
    .page-header-title {
      flex: 1;
      line-height: 50px;
      font-size: 18px;
      font-weight: 400;
    }
    .page-header-right {
      height: 100%;
      line-height: 50px;
    }
    .page-header-button {
      display: flex;
      position: relative;
      width: 100px;
      -webkit-box-align: center;
      align-items: center;

      .nav-btn {
        -webkit-box-flex: 1;
        flex: 1;
        text-align: right;
        margin-right: 6px;

        .nav-icon {
          width: 17px;
          height: 16px;
          display: inline-block;
        }
      }
    }
  }
  .content {
    padding: 25px;
    text-align: center;

    .outer {
      .top {
        color: #999;
      }
      .seatRegion {
        margin-top: 10px;
        margin-bottom: 25px;
        .seatRow {
          // height: 27px;
          .my-seat {
            display: inline-block;
            width: 19px;
            height: 19px;
            margin: 0 6px 8px 0;
            background-size: 100% 100%;
          }
          .active {
            width: 30px;
            height: 30px;
            background-image: url("../assets/images/80c67d1a9af433466453c69d29f32888742.png");
            background-repeat: no-repeat;
            background-size: cover;
          }
        }
      }
      .graphContainer {
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #999;
        background-color: #f6f6f6;

        .graphItem {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-flex: 0;
          flex: none;
          padding: 0 7px;
          height: 30px;

          .graphLoverIcon {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 5px;
            background: no-repeat 50%;
            background-size: contain;
          }
        }
      }
    }
  }
  .seats-info {
    height: 136px;
    overflow: hidden;
    margin: 0 10px;
    padding-bottom: 15px;
    border-radius: 12px;
    box-shadow: 0 1px 8px 0 rgb(0 0 0 / 3%);
    font-size: 13px;
    color: #333;
    background-color: #fff;

    .movie-info {
      position: relative;
      margin-top: 15px;
      padding: 0 15px;

      .movie-name {
        line-height: 21px;
        font-family: PingFangSC-Medium;
        font-size: 15px;
      }
    }
    .show-info {
      margin-top: 5px;
      padding: 0 15px;
      line-height: 18px;
      color: #666;

      & > span {
        vertical-align: middle;
        margin-left: 5px;
      }
      & > span:first-child {
        margin: 0;
      }
    }
    .selectedSeat {
      position: relative;
      font-size: 12px;

      .border1px {
        margin: 15px 15px 0;
        border-top: 1px solid #f6f6f6;
        transform: scaleY(0.5);
      }
      .selectedList {
        overflow-x: auto;
        margin-top: 15px;
        white-space: nowrap;

        .selectedItem {
          position: relative;
          display: inline-block;
          box-sizing: border-box;
          min-width: 81px;
          height: 45px;
          line-height: 17px;
          margin-right: 10px;
          padding: 0 20px 0 10px;
          border-radius: 4px;
          background: #f6f6f6;

          &:first-child {
            margin-left: 15px;
          }

          .seatDesc {
            margin-top: 5px;
          }
          .cancelBtn {
            position: absolute;
            top: 50%;
            right: 0;
            width: 20px;
            height: 20px;
            margin-top: -10px;
            background: url("../assets/images/叉叉.png") no-repeat 2px;
            background-size: 8px 8px;
          }
        }
        &::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  .submitBlock {
    margin: 10px;
    padding-bottom: env(safe-area-inset-bottom);

    .submitBtn {
      display: flex;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      width: 100%;
      height: 44px;
      border-radius: 50px;
      text-align: center;
      font-family: PingFangSC-Medium;
      font-size: 17px;
      color: #fff;
      background-image: linear-gradient(
        270deg,
        rgba(255, 123, 16, 0.98),
        rgba(255, 154, 15, 0.98)
      );

      .submitDesc {
        line-height: 24px;
      }
      .disableText {
        opacity: 0.4;
        font-weight: 500;
      }
    }
  }
}
.load {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 140px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 14px;
  background-color: #000;
  opacity: 0.7;
}
</style>